<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<!-- 适配移动端 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, shrink-to-fit=no, minimal-ui">
		<title>Health</title>
		<!-- 描述 -->
		<meta name="Description" content="描述" />
		<!-- 关键字 -->
		<meta name="Keywords" content="关键字 " />
		<!-- 引入fontawesome5css -->
		<link rel="stylesheet" href="__PUBLIC__/fontawesome-free-5.8.2-web/css/all.css">
		<!-- 引入自己的css -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/index.css" />
	</head>

	<body>
		<!-- 页头 -->
		<div id="header">
			<div class="title">
				<div></div>
				<h1><span>SAMSUNG&nbsp;</span>Health</h1>
				<i class="far fa-user-circle"></i>
			</div>
		</div>

		<!-- 主题 -->
		<div id="main">
			<!-- 设置目标 -->
			<div class="set-target">
				<div class="set-target-icon">
					<i class="fas fa-running"></i>
					<i class="fas fa-utensils"></i>
					<i class="fas fa-moon"></i>
				</div>
				<div class="set-target-text">
					<div>
						<p>设置目标、追踪宁每天的运动并达到新<br />的里程碑。</p>
					</div>
				</div>
				<div class="set-target-btn">
					<div class="btn">
						<a href="{:U('Index/diet')}">设置目标</a>
					</div>
				</div>
			</div>

			<!-- 跑步步数视图 -->
			<div id="running-view"></div>

			<!-- 功能列表 -->
			<div class="functions-list">
				<div class="f-list-tr">
					<div class="f-list-td">
						<i class="fas fa-running"></i>
						<p>跑步</p>
						<div class="f-list-btn">开始</div>
					</div>
					<div class="f-list-td">
						<i class="fas fa-utensils"></i>
						<p>早餐</p>
						<div class="f-list-btn">添加</div>
					</div>
					<div class="f-list-td">
						<i class="fas fa-weight"></i>
						<p>体重</p>
						<div class="f-list-btn">体重</div>
					</div>
				</div>
				<div class="f-list-tr">
					<div class="f-list-td">
						<i class="fas fa-dumbbell"></i>
						<p>仰卧推举</p>
						<div class="f-list-btn">开始</div>
					</div>
					<div class="f-list-td">
						<i class="fas fa-plus"></i>
						<p>个性化管理</p>
					</div>
					<div class="f-list-td"></div>
				</div>
			</div>
		</div>

		<!-- 页脚固定 -->
		<div class="footer-fixed"></div>
		<!-- 页脚 -->
		<div id="footer">
			<div class="footer-active">
				<i class="fas fa-user"></i>
				<p>
					<a href="{:U(index)}">主页</a>
				</p>
			</div>
			<div>
				<i class="fas fa-users"></i>
				<p>
					<a href="javascript:;">圈子</a>
				</p>
			</div>
			<div>
				<i class="fas fa-bars"></i>
				<p>
					<a href="javascript:;">更多</a>
				</p>
			</div>
		</div>
		
		
		<script src="__PUBLIC__/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__PUBLIC__/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById("running-view"));
	        
	        var calnum = [];
	        var carnum = [];
	        var fatnum = [];
	        var pronum = [];
//	        var aDate = [];
			var aDate = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
			
			// 指定图表的配置项和数据
	        var option = {
	        	// 标题
	            title: {
	                text: ""
	            },
	            
	            color: ["#14762d"],
	            
	            tooltip: {
	            	trigger: "axis",
	            	axisPointer: {
			            type: "shadow",
			        }
	            },
	            
	            // 图例
	            legend: {
	                data:["卡路里", "碳水化合物", "脂肪", "蛋白质"],
	                //显示隐藏
	                selected:{
	                	"碳水化合物": false,
	                	"脂肪": false,
	                	"蛋白质": false,
	                },
	            },
	            
	            // x轴
	            xAxis: {
	            	// 数据
	                data: aDate,
	            },
	            
	            // y轴
	            yAxis: {
	            	show: false,
	            },
	            
	            series: [
	            {
	                name: "卡路里",
	                // 图表类型
	                type: "line",// bar柱形图、line曲线图、pie饼图
	                // 数据
	                data: [],
	            },
	            {
	                name: "碳水化合物",
	                // 图表类型
	                type: "line",// bar柱形图、line曲线图、pie饼图
	                // 数据
	                data: [],
	            },
	            {
	                name: "脂肪",
	                // 图表类型
	                type: "line",// bar柱形图、line曲线图、pie饼图
	                // 数据
	                data: [],
	            },
	            {
	                name: "蛋白质",
	                // 图表类型
	                type: "line",// bar柱形图、line曲线图、pie饼图
	                // 数据
	                data: [],
	            },
	            ],
	        };
	        
			$(function() {
			    $.get("{:U('Index/ajax_echarts')}",
			    function(gdata){

			    	console.log(gdata);
			    	
			    	for (var i = 0; i < gdata.length; i++) {
			    		calnum.push(gdata[i].calnum);// 卡路里
			    		carnum.push(gdata[i].carnum);// 碳水化合物
			    		fatnum.push(gdata[i].fatnum);// 脂肪
			    		pronum.push(gdata[i].pronum);// 蛋白质
//			    		aDate.push("星期" + (i + 1));
			    	}

			    	option.series[0].data = calnum;
			    	option.series[1].data = carnum;
			    	option.series[2].data = fatnum;
			    	option.series[3].data = pronum;

//			    	console.log(option.series[0].data);

// 			    	// 使用刚指定的配置项和数据显示图表。
			    	myChart.setOption(option);

			    	// console.log(gdata);
			    	// if(gdata != null){
			    	// 	arr = gdata;
					//
				    // 	for (var i = 0; i < gdata.length; i++) {
				    // 		aDate.push("星期" + (i + 1));
				    // 	}
					//
				    // 	option.series[0].data = arr;
				    // 	console.log(option.series[0].data);
					//
				    // 	// 使用刚指定的配置项和数据显示图表。
				    // 	myChart.setOption(option);
			    	// }

			  	}, "json");
			});
		</script>
	</body>

</html>